<template>
  <el-dialog
    append-to-body
    title="添加"
    :visible.sync="dialogVisible"
    width="800px"
  >
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="喷灌机设置" name="first">
        <vxe-form
          :data="form"
          :items="formConfig.items"
          :rules="formConfig.rules"
          :title-align="formConfig.titleAlign"
          title-colon
          :title-width="formConfig.titleWidth"
          @submit="submit"
        >
          <template #direction>
            <el-radio-group v-model="form.direction">
              <el-radio-button
                v-for="(item, index) in directOptions"
                :key="index"
                :label="item.value"
              >
                {{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </template>
          <template #starttime>
            <el-date-picker
              v-model="form.starttime"
              align="center"
              placeholder="选择日期时间"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </template>
          <template #delay>
            <el-input v-model="form.delay" placeholder="启动延时" type="number">
              <template slot="append">分钟</template>
            </el-input>
          </template>
        </vxe-form>
      </el-tab-pane>
      <el-tab-pane label="分区属性设置" name="second">
        <el-table border :data="form.cells" :height="540" style="width: 100%">
          <el-table-column align="center" label="大分区" prop="id" width="80" />
          <el-table-column
            align="center"
            label="小分区"
            prop="idx"
            width="80"
          />
          <el-table-column align="center" label="行走速率(%)" prop="name">
            <template #default="{ row }">
              <el-input-number
                v-model="row.v"
                class="mini-input"
                controls-position="right"
                :max="100"
                :min="1"
                placeholder="行走速率"
                size="mini"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="脉冲周期(s)" prop="address">
            <template #default="{ row }">
              <el-input-number
                v-model="row.d"
                class="mini-input"
                controls-position="right"
                :max="100"
                :min="1"
                placeholder="脉冲周期"
                size="mini"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="占空比(%)" prop="address">
            <template #default="{ row }">
              <el-input-number
                v-model="row.p"
                class="mini-input"
                controls-position="right"
                :max="100"
                :min="1"
                placeholder="占空比"
                size="mini"
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="尾枪"
            prop="address"
            width="136"
          >
            <template #default="{ row }">
              <el-radio-group v-model="row.endGun" size="mini">
                <el-radio-button label="打开" />
                <el-radio-button label="关闭" />
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
        <div class="h12"></div>
        <el-button
          icon="el-icon-document"
          size="small"
          type="primary"
          @click="submit"
        >
          提交
        </el-button>
        <!-- <el-button icon="el-icon-refresh" size="small" type="default">
          重置
        </el-button> -->
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import { deepClone, getCurrentDate } from '@/utils'
  import { cells } from '@/utils/constant'
  import { addPlan, getCell } from '@/api/device'
  export default {
    data() {
      return {
        serialno: '0110.0007.2027000724',
        dialogVisible: false,
        activeName: 'first',
        cells,
        grid: '',
        grids: [
          { id: 1, name: '手动分区20240721' },
          { id: 2, name: '手动分区20240722' },
        ],
        directOptions: [
          { label: '正向', value: 1 },
          { label: '反向', value: 2 },
        ],
        form: {
          starttime: '',
          name: 'irr Plan' + getCurrentDate(),
          direction: 1,
          delay: 1,
          stopAngle: 0,
        },
        formConfig: {
          titleWidth: 110,
          titleAlign: 'right',
          items: [
            {
              field: 'starttime',
              title: '执行时间',
              span: 12,
              slots: { default: 'starttime' },
              itemRender: {
                name: '$input',
                props: {
                  type: 'date',
                  placeholder: '执行时间',
                  clearable: true,
                },
              },
            },
            {
              field: 'name',
              title: '计划名称',
              span: 12,
              itemRender: {
                name: '$input',
                props: {
                  placeholder: '计划名称',
                  clearable: true,
                },
              },
            },
            {
              field: 'direction',
              title: '行进方向',
              span: 12,
              slots: { default: 'direction' },
              itemRender: {
                name: '$input',
                props: {
                  type: 'select',
                  placeholder: '行进方向',
                  clearable: true,
                },
              },
            },
            {
              field: 'delay',
              title: '启动延时',
              span: 12,
              slots: { default: 'delay' },
              itemRender: {
                name: '$input',
                props: {
                  type: 'number',
                  placeholder: '启动延时(分钟)',
                  clearable: true,
                },
              },
            },
            // {
            //   field: 'stopAngle',
            //   title: '停止角度',
            //   span: 12,
            //   itemRender: {
            //     name: '$input',
            //     props: {
            //       type: 'number',
            //       placeholder: '停止角度',
            //       clearable: true,
            //     },
            //   },
            // },
            {
              span: 24,
              align: 'left',
              className: 'pl110',
              itemRender: {
                name: '$buttons',
                children: [
                  {
                    props: {
                      type: 'submit',
                      content: '提交',
                      status: 'primary',
                      icon: 'el-icon-document',
                    },
                  },
                  // {
                  //   props: {
                  //     type: 'reset',
                  //     content: '重置',
                  //     icon: 'el-icon-refresh',
                  //   },
                  // },
                ],
              },
            },
          ],
          rules: {
            starttime: [{ required: true, message: '请选择计划执行时间' }],
            name: [{ required: true, message: '请输入计划名称' }],
          },
        },
      }
    },
    methods: {
      async getCell() {
        const { data } = await getCell(this.serialno)
        this.cells = data
        const cellsFilter = this.cells.map((val) => {
          val.v = 100
          val.d = 60
          val.p = 100
          return val
        })
        this.form.cells = cellsFilter
      },
      show(row) {
        this.dialogVisible = true
        if (row.id) {
          this.form = deepClone(row)
          this.form.name = this.form.name + 'Copy'
          const cells = row.devices[0].options.cells
          const cellsFilter = this.cells.map((val, index) => {
            val.v = cells[index]['v']
            val.d = cells[index]['d']
            val.p = cells[index]['p']
            val.endGun = cells[index]['endGun']
            return val
          })
          this.form.cells = cellsFilter
        } else {
          this.getCell()
        }
      },
      async submit() {
        this.form.serialno = this.serialno
        this.form.manual_plan = 1
        const { msg } = await addPlan(this.form)
        this.$baseMessage(msg, 'success', 'vab-hey-message-success')
        this.dialogVisible = false
        this.$emit('getPlans')
      },
    },
  }
</script>

<style lang="scss" scoped></style>
